<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '工作总结详情',
  },
}
</route>

<template>
  <view class="page-container">
    <view class="">
      <view class="bg-white p-3 pb-2 flex items-center">
        <view class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center mr-2">
          <image src="/static/svg/jiqiren.svg" class="w-6 h-6" mode="scaleToFill" />
        </view>
        <text class="text-base font-medium">AI 智能日报 ({{ getToday() }})</text>
      </view>

      <view class="bg-white p-3 pt-0">
        <view class="text-sm">
          <view class="font-medium">指标概览</view>
          <wd-divider style="--wot-size-side-padding: 0" class="my-1" />
          <view class="flex justify-between text-[#6e6e6e]">
            <view class="flex">
              <view>清欠任务：</view>
              <!-- <view>完成率 20%</view> -->
            </view>
            <view class="text-[#4477ee]">{{ report.remindTask }}</view>
          </view>
          <view class="flex justify-between text-[#6e6e6e] mt-1">
            <view class="flex">
              <view>当期任务：</view>
              <!-- <view>完成率 45%</view> -->
            </view>
            <view class="text-[#4477ee]">{{ report.currentTask }}</view>
          </view>
          <view class="flex justify-between text-[#6e6e6e] mt-1">
            <view class="flex">
              <view>走访任务：</view>
              <!-- <view>完成率 32%</view> -->
            </view>
            <view class="text-[#4477ee]">{{ report.activeTask }}</view>
          </view>
        </view>
      </view>

      <view class="bg-white p-3 pt-2 mt-1">
        <view class="text-sm">
          <view class="font-medium">重点工作</view>
          <wd-divider style="--wot-size-side-padding: 0" class="my-1" />
          <view class="mt-2 flex justify-between text-[#6e6e6e]">
            <view class="w-26 shrink-0">巡查覆盖率：</view>
            <view class="text-[#4477ee]">{{ report.patrolCover }}</view>
          </view>
          <view class="mt-2 flex justify-between text-[#6e6e6e]">
            <view class="w-26 shrink-0">工单处理：</view>
            <view class="text-[#4477ee]">{{ report.workOrder }}</view>
          </view>
          <view class="mt-2 flex justify-between text-[#6e6e6e]">
            <view class="flex">
              <view>缴费提醒：</view>
            </view>
            <view class="text-[#4477ee]">{{ report.feeNotice }}</view>
          </view>
          <view class="mt-2 flex justify-between text-[#6e6e6e]">
            <view class="flex">
              <view>多经提醒：</view>
            </view>
            <view class="text-[#4477ee]">{{ report.multipleFiNotice }}</view>
          </view>
          <view class="mt-2 flex justify-between text-[#6e6e6e]">
            <view class="w-26 shrink-0">会话统计：</view>
            <view class="text-[#4477ee]">{{ report.chatStatistics }}</view>
          </view>
        </view>
      </view>

      <view class="bg-white p-3 pt-2 mt-1">
        <view class="text-sm">
          <view class="font-medium">工作亮点</view>
          <wd-divider style="--wot-size-side-padding: 0" class="my-1" />
          <view class="mt-2 flex justify-between text-[#6e6e6e]">
            {{ report.highLights }}
          </view>
        </view>
      </view>
      <view class="bg-white p-3 pt-2 mt-1">
        <view class="text-sm">
          <view class="font-medium">明日待办</view>
          <wd-divider style="--wot-size-side-padding: 0" class="my-1" />
          <view class="mt-2 flex justify-between text-[#6e6e6e]">
            {{ report.todos }}
          </view>
        </view>
      </view>
      <view class="bg-white p-3 pt-2 mt-1">
        <view class="text-sm">
          <view class="font-medium">问题及建议</view>
          <wd-divider style="--wot-size-side-padding: 0" class="my-1" />
          <view class="mt-2 text-[#6e6e6e]">
            <view>{{ report.advance }}</view>
            <view class="mt-2">
              <view class="bg-blue-50 p-3 rounded-lg">
                <view class="font-medium mb-2 flex text-black">
                  <image class="w-5 h-5 mr-2" src="/static/svg/jiqiren.svg" mode="scaleToFill" />
                  <text>AI改进建议：</text>
                </view>
                <view class="text-sm text-gray-600 mb-3">
                  {{ report.aiAdvance }}
                </view>
                <view class="text-right">
                  <wd-button icon="download" size="small" plain :round="false">下载</wd-button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <wd-button
        class="mt-10"
        style="--wot-button-large-radius: 0"
        :round="false"
        size="large"
        block
      >
        补充日报内容
      </wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { getReport, IReport } from './api'
const report = ref<IReport>({})
onLoad((params) => {
  console.log(params.id)
  getData(1)
})

function getData(id) {
  getReport(id).then((res) => {
    console.log(res)
    report.value = res.data
  })
}

const getToday = () => {
  const now = dayjs().format('YYYY-MM-DD')
  return now
}
</script>

<style lang="scss" scoped>
//
.page-container {
  margin: 0 auto;
  background-color: #f5f5f5;
}
.section-title {
  position: relative;
  margin: 16px 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.section-title::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background-color: #eee;
}
.data-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}
:deep(.wd-divider__content) {
  padding: 0;
}
</style>
